<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Follow Along Nav</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/stripeDropdown.css">
</head>

<body>

    <nav class="top">
        <div class="dropdownBackground">
            <span class="arrow"></span>
        </div>


        <ul class="cool">

            <li>
                <a href="#">About</a>
                <div class="dropdown dropdown1">
                    <div class="bio">
                        <img src="https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?ixlib=rb-1.2.1&auto=format&fit=crop&w=747&q=80"
                            alt="">
                        <p>Tidbits JS sure does love web development. She is learning Javascript, ReactJS and CSS. Along
                            with She aims to learn Node JS very soon. She is a self taught Developer and is on her way
                            to become MERN Developer</p>
                    </div>
                </div>
            </li>

            <li>
                <a href="#">Interest</a>
                <ul class="dropdown interests">
                    <li>
                        <span class="code">Javascript</span>
                        <a href="#">You dont know JS yet !</a>
                    </li>
                    <li>
                        <span class="code">ReactJS</span>
                        <a href="#">Be actively Reactive</a>
                    </li>
                    <li>
                        <span class="code">Node</span>
                        <a href="#">Learn Node</a>
                    </li>
                    <li>
                        <span class="code">Atom</span>
                        <a href="#">Got an Atom?</a>
                    </li>
                    <li>
                        <span class="code">WTF</span>
                        <a href="#">What the Flexbox?!</a>
                    </li>
                    <li>
                        <span class="code">Grid</span>
                        <a href="#">CSS Grid to Go</a>
                    </li>
                    <li>
                        <span class="code">LRX</span>
                        <a href="#">Learn Redux</a>
                    </li>
                    <li>
                        <span class="code">Hooks</span>
                        <a href="#">Get steady with HOOKS</a>
                    </li>
                    <li>
                        <span class="code">Games</span>
                        <a href="#">Let the Game begin</a>
                    </li>
                </ul>
            </li>

            <li>
                <a href="#">Links</a>
                <ul class="dropdown dropdown3">
                    <li><a href="twitter" class="button"><i class="fa fa-twitter fa-2x"></i>Twitter</a></li>
                    <li><a href="instagram" class="button"><i class="fa fa-instagram fa-2x"></i>Instagram</a></li>
                    <li><a href="blog" class="button"><i class="fa fa-heart fa-2x"></i>Blog</a></li>
                    <li><a href="github" class="button"><i class="fa fa-github-alt fa-2x"></i>GitHub</a></li>
                </ul>
            </li>

            <li>
                <a href="#">More</a>
                <ul class="dropdown dropdown4">

                    <li>
                        <div class="more">
                            <img src="https://images.unsplash.com/photo-1558901357-ca41e027e43a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=551&q=80"
                                alt="">
                            <div class="text">
                                <p><strong>Books</strong></p>
                                <p>Wherever I am, if I've got that book with me, I've got a place I can go and be happy.
                                </p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="more">
                            <img src="https://images.unsplash.com/photo-1514474959185-1472d4c4e0d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80"
                                alt="">
                            <div class="text">
                                <p><strong>Code</strong></p>
                                <p>It is our choices, Harry, that show what we truly are, far more than our abilities
                                </p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="more">
                            <img src="https://images.unsplash.com/photo-1527168027773-0cc890c4f42e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
                                alt="">
                            <div class="text">
                                <p><strong>Goals</strong></p>
                                <p>Shoot for the moon. Even if you miss, you’ll land among the stars.</p>
                            </div>
                        </div>
                    </li>

                    <hr />

                    <div class="part2">

                        <li>
                            <div class="info">
                                <i class="fa fa-spotify fa-3x"></i>
                                <div class="para">
                                    <p>Music</p>
                                    <p>Hear the Voice</p>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="info">
                                <i class="fa fa-youtube fa-3x"></i>
                                <div class="para">
                                    <p>Videos</p>
                                    <p>Explore</p>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="info">
                                <i class="fa fa-amazon fa-3x"></i>
                                <div class="para">
                                    <p>Amazon</p>
                                    <p>Bring that Home</p>
                                </div>
                            </div>
                        </li>

                    </div>

                </ul>
            </li>

        </ul>
    </nav>

    <script src="../assets/js/StripeDropdown.js"></script>
</body>

</html>